<template>
  <!-- <h1>{{name}}</h1> -->
  <h1 style="color: red">{{age}}</h1>
  <child :age="age"></child>
  <button @click="age++">点我</button>
</template>

<script>
import Child from './Child.vue'
import { ref } from 'vue'
import {
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onActivated,
  onDeactivated,
  onBeforeUnmount,
  onUnmounted
} from 'vue'
export default {
  components: {
    Child
  },
  setup () {
    onBeforeMount(() => {
      console.error('onBeforeMount')
    })
    onMounted(() => {
      console.error('onMounted')
    })
    onBeforeUpdate(() => {
      console.error('onBeforeUpdate')
    })
    onUpdated(() => {
      console.error('onUpdated')
    })
    onActivated(() => {
      console.error('onActivated')
    })
    onDeactivated(() => {
      console.error('onDeactivated')
    })
    onBeforeUnmount(() => {
      console.error('onBeforeUnmount')
    })
    onUnmounted(() => {
      console.error('onUnmounted')
    })
    const age = ref(12)
    return {
      age
    }
  }
}
</script>

<style>
</style>